<!--  4634634 {{ $agent_id }}  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreateOrder</title>

    {!! Dcat\Admin\Admin::asset()->cssToHtml() !!}

    <link rel="stylesheet" href="/vendor/dcat-admin/dcat/plugins/select/select2.min.css?v2.2.2-beta">
    <link rel="stylesheet" href="/static/css/createOrder.css">

    <script src="/static/js/common.js"></script>
    <script src="/static/js/vue.min.js"></script>

    <script src="/vendor/dcat-admin/dcat/plugins/select/select2.full.min.js?v2.2.2-beta"></script>

    <style>
        .select2-container--default .select2-results__option--highlighted:focus{
            background-color:#ebf0f3!important;
        }
    </style>

</head>
<body>
<div id="app">
    <header>
        <h1 class=" float-left">
            <span class="text-capitalize">创建订单</span>
        </h1>
        <div class="clearfix"></div>
        <div class="select-user">

            <div class="table-responsive">
                <div class="top d-block clearfix p-0">
                    <style>::-ms-clear,::-ms-reveal{display: none;}</style>
                    <div class="table-filter" style="position: relative">
                        <label style="width: 18rem">
                            <input type="text" class="form-control form-control-sm quick-search-input" placeholder="账号" v-model="inputValue" @focus="showSelectOption = true"  @input="onSearchUser">
                        </label>
                        <span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 35px; left: 0px;"  v-if="showSelectOption">
                            <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 284.172px;">
                                <span class="select2-results">
                                    <ul class="select2-results__options" role="listbox"  aria-expanded="true" aria-hidden="false">
                                        <li  v-for="item in userList" :key="item.id" @click="selectUser(item)" class="select2-results__option select2-results__option--selectable"  role="option" aria-selected="false">@{{item.id}}(@{{item.tiktokno}})</li>
                                    </ul></span>
                            </span>
                        </span>

                    </div>
                    <button class="btn btn-primary btn-mini btn-outline" style="margin-right:3px">
                        <span class="d-none d-sm-inline">&nbsp; 余额: @{{(selectUserItem.balance || 0) / 100}}</span>
                    </button>
                </div>
            </div>

        </div>
    </header>
    <main>
        <div class="left">
            <div class="divider-title">
                <div class="divider-lt"></div>
                <div class="title">用户橱窗</div>
                <div class="divider-rt"></div>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>主图</th>
                        <th>成本</th>
                        <th>利润</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody v-if="goodsList.length">
                        <tr v-for="item in goodsList" :key="item.id">
                            <td>
                                <div class="two-line">@{{item.name}}</div>
                            </td>
                            <td>
                                <a :href="item.img" target="_blank"><img :src="item.img" alt=""></a>
                            </td>
                            <td>@{{(item.original_price || 0) / 100}}</td>
                            <td>@{{  (item.profit || 0) / 100  }}</td>
                            <td><button @click="selectGoodsItem(item)">添加</button></td>
                        </tr>
                    </tbody>
                    <tbody v-else>
                    <tr>
                        <td colspan="5">
                            <div style="margin:5px 0 0 10px;"><span class="help-block" style="margin-bottom:0"><i class="feather icon-alert-circle"></i>&nbsp;暂无数据</span></div>
                        </td>
                    </tr>
                    </tbody>


                </table>

            </div>
            <div class="pagination-wrapper">
                <ul class="pagination" v-if="goodsList.length">
                    <li @click="getList(1, true)" v-if="currentPage > 0"><a href="#">1</a></li>
                    <li class="pre-page" v-if="currentPage > 0" @click="preHandle">
                        <svg width="28" height="28" viewBox="0 0 48 48" fill="none" class="icon-more"
                             xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="24" r="3" fill="#686868" />
                            <circle cx="24" cy="24" r="3" fill="#686868" />
                            <circle cx="36" cy="24" r="3" fill="#686868" />
                        </svg>
                        <svg width="28" height="28" viewBox="0 0 48 48" fill="none" class="icon-next"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M31 36L19 24L31 12" stroke="#686868" stroke-width="4" stroke-linecap="round"
                                  stroke-linejoin="round" />
                        </svg>
                    </li>
                    <li :class="{'active': page === pageItem}" v-for="pageItem in computedPage" @click="getList(pageItem)"><a
                            href="#">@{{pageItem}}</a></li>
                    <li class="next-page" v-if="(currentPage * 5) + 5 < 100 && last_page > 5" @click="nextHandle">
                        <svg width="28" height="28" viewBox="0 0 48 48" fill="none" class="icon-more"
                             xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="24" r="3" fill="#686868" />
                            <circle cx="24" cy="24" r="3" fill="#686868" />
                            <circle cx="36" cy="24" r="3" fill="#686868" />
                        </svg>
                        <svg width="28" height="28" viewBox="0 0 48 48" fill="none" class="icon-next"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 12L31 24L19 36" stroke="#686868" stroke-width="4" stroke-linecap="round"
                                  stroke-linejoin="round" />
                        </svg>
                    </li>
                    <li @click="getList(last_page)" v-if="(currentPage * 5) + 5 < last_page"><a href="#">@{{last_page}}</a></li>
                </ul>
            </div>

        </div>
        <div class="right">
            <div class="divider-title">
                <div class="divider-lt"></div>
                <div class="title">当前选择</div>
                <div class="divider-rt"></div>
            </div>
            <div class="select-list">
                <div class="select-item" v-for="item in selectGoods" :key="item.id">
                    <img :src="item.img" alt="">
                    <div class="good-name two-line">@{{item.name}}</div>
                    <div class="good-num">
                        <div class="jia-jian" @click="jianHandle(item)">
                            <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.5 24L38.5 24" stroke="#586cb1" stroke-width="4" stroke-linecap="round"
                                      stroke-linejoin="round" />
                            </svg>
                        </div>
                        <input type="number" v-model="item.num">
                        <div class="jia-jian" @click="item.num++">
                            <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M24.0605 10L24.0239 38" stroke="#586cb1" stroke-width="4" stroke-linecap="round"
                                      stroke-linejoin="round" />
                                <path d="M10 24L38 24" stroke="#586cb1" stroke-width="4" stroke-linecap="round"
                                      stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <input v-model="add_time" type="datetime-local">
        <span>订单金额：@{{  (computedPrice.price  || 0) / 100 }}</span>
        <span>成本：@{{  (computedPrice.cost  || 0) / 100}}</span>
        <button  @click="createOrder" class="btn btn-primary dialog-create btn-outline"><i class="feather icon-plus"></i><span class="d-none d-sm-inline">&nbsp; 创建订单</span></button>
    </footer>
</div>
<script>
    const beaeurl = '{{ $api_url ?? '' }}';
    new Vue({
        el: '#app',
        data() {
            return {
                userList: [],
                selectUserId: undefined,
                goodsList: [],
                showSelectOption: false,
                selectUserItem: {},
                last_page: 1,
                page: 1,
                selectGoods: [],
                keyWord: '',
                add_time: undefined,
                currentPage: 0,
                inputValue:''
            }
        },
        mounted() {
            this.add_time = this.formatDate(new Date())
            this.getUser()
        },
        computed: {
            computedPrice() {
                const price = this.selectGoods.reduce((pre, cur) => {
                    return pre + cur.price * cur.num
                }, 0)
                // 成本
                const cost = this.selectGoods.reduce((pre, cur) => {
                    return pre + cur.original_price * cur.num
                }, 0)
                return {
                    price,
                    cost
                }
            },
            computedPage() {
                const a = [];
                for (let i = 1; i <= this.last_page; i++) {
                    a.push(i)
                }
                return a.slice(this.currentPage * 5, (this.currentPage * 5) + 5)
            }
        },
        watch: {
            selectUserId() {
                this.selectGoods = [];
                this.getGoodsByUserId(this.selectUserId)
            }
        },
        methods: {
            nextHandle() {
                this.currentPage++;
            },
            preHandle() {
                if (this.currentPage === 0) {
                    return;
                }
                this.currentPage--;
            },
            formatDate(now) {
                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const second = now.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${second}`;
            },
            jianHandle(item){
                if(item.num > 1){
                    item.num--
                }else{
                    this.selectGoods = this.selectGoods.filter(v => v.id !== item.id)
                }
            },
            async getUser() {
                const res = await request('/api/v1/getuser', 'get', {
                    agent_id: "{{ $agent_id }}",
                    key: this.keyWord,
                    page: 1,
                    limit: 20
                })
                this.userList = res.data.list
                this.page = 1;
            },
            getList() {
                this.page++;
                this.getGoodsByUserId(this.selectUserId)
            },
            async getGoodsByUserId(id) {
                const res = await request('/api/v1/user/shopwindow', 'get', {
                    user_id: id,
                    page: this.page,
                    limit: 10
                })
                this.goodsList = res.data.list
                this.last_page = res.data.paginate.last_page;
            },
            selectUser(item) {
                this.selectUserItem = item;
                this.selectUserId = item.id
                this.showSelectOption = false;
            },
            onSearchUser(e) {
                console.log(e);
                this.keyWord = e.target.value;
                this.getUser()
            },
            selectGoodsItem(item) {
                console.log(this.selectGoods.some(v => v.id === item.id));
                if (this.selectGoods.some(v => v.id === item.id)) {
                    this.selectGoods.forEach(f => {
                        if (f.id === item.id) {
                            f.num++
                        }
                    })
                } else {
                    const formatItem = { ...item, num: 1 }
                    this.selectGoods.push(formatItem)
                }
                console.log(this.selectGoods);
            },
            async createOrder() {
                const carts = this.selectGoods.map(v => {
                    return {
                        goods_id: v.id,
                        number: v.num
                    }
                })
                const res = await request('/api/v1/goodsorder/create', 'post', {
                    user_id: this.selectUserId,
                    carts,
                    add_time: this.formatDate(new Date(this.add_time))
                })
                if(res.code == 0){
                    toast('操作成功')
                }else{
                    toast(res.msg)
                }

                this.selectGoods = []
            }
        }
    })
</script>
</body>

</html>
